<h1>Choose a template</h1>
<p>Start by choosing the document type you choose to create.</p>

<ol class="mt-9 grid grid-cols-3 gap-4 list-none">
  {{#each @model as |docType|}}
    <li class="relative">
      <LinkTo
        class="w-full h-full no-underline"
        @route="authenticated.new.doc"
        @query={{hash docType=docType.name}}
      >
        <Hds::Card::Container
          @level="mid"
          @levelHover="high"
          @hasBorder="true"
          class="template-card
            {{if docType.moreInfoLink 'template-card--with-link'}}"
        >
          <div>
            <p class="text-display-200 text-color-foreground-primary mb-1">
              {{docType.name}}
            </p>
            <h2
              class="text-display-400 font-semibold text-color-foreground-strong"
            >
              {{docType.longName}}
            </h2>
            <p class="my-2 text-body-200 text-color-foreground-primary">
              {{docType.description}}
            </p>
          </div>
        </Hds::Card::Container>
      </LinkTo>
      {{#if docType.moreInfoLink}}
        <Hds::Link::Standalone
          @isHrefExternal={{true}}
          @href={{docType.moreInfoLink.url}}
          @icon="external-link"
          @iconPosition="trailing"
          class="small-external-link absolute bottom-6 left-5 whitespace-nowrap z-10"
          @text={{docType.moreInfoLink.text}}
        />
      {{/if}}
    </li>

  {{/each}}

</ol>
